<template>
  <div class="writer">
    <div class="top">
      <span>音乐制作人</span>
      <span @click="goPageSinger">查看更多</span>
    </div>
    <div class="content" v-for="m in musicianList" :key="m.id">
      <Singer
          :name="m.name"
          :fans="m.listener"
          :playCount="m.heat"
          :head="m.head"
          :attestation="m.is_settled_author"
      ></Singer>
    </div>
  </div>
</template>

<script>
import Singer from "./Singer";
import {useStore} from "vuex";
import {onMounted} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "Writer",
  description: {
    // 创作者
  },
  components: {Singer},
  setup() {
    const store = useStore();
    const router = useRouter();
    let musicianList = store.state.kugouNet.singerListHome;

    const goPageSinger = () => {
      router.push({
        name: "singerList",
      })
    }

    onMounted(() => {
      if (musicianList.length < 1) {
        // 请求歌手
        store.dispatch("kugouNet/getSingerListNetStore", {type: "home", page: 1, num: 3})
      }
    })

    return {
      musicianList,
      goPageSinger,
    }
  }

}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.writer {
  width: 290px;
  /*background-color: #00d463;*/
  /*border: 1px solid pink;*/
  /*div :first-child {
    background-color: #00d463;
  }*/

  .top {
    width: 290px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    span:first-child {
      color: @fcc;
      font-size: 18px;
    }

    span:last-child {
      color: @fbc;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .content {
    margin-top: 25px;
    /*flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;*/
  }

}
</style>
